<template>
  <div class="tab-container">
    <!-- 选项卡头部 -->
    <div class="tab-header">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab-item', { active: currentTab === index }]"
        @click="selectTab(index)"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="tab-content">
      <slot :name="`tab-${currentTab}`"></slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义选项卡数据
const tabs = [
  { label: '服务端日志' },
  { label: '客户端日志' }
];

// 当前激活的选项卡索引
const currentTab = ref(1);

// 切换选项卡
const selectTab = (index) => {
  currentTab.value = index;
};
</script>

<style scoped>
/* 容器整体样式 */
.tab-container {
  width: 100%;
  font-family: Arial, sans-serif;
  background-color: #2d3e44; /* 整体背景色 */
}

/* 选项卡头部 */
.tab-header {
  display: flex;
  align-items: center;
  position: relative;
  background-color: #2d3e44;
}

.tab-item.active::after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  bottom:0px;
  right:-20px;
  background: transparent;
  border-bottom-left-radius: 10px;
  box-shadow: 0px 8px 0px 0px #fff;
}

/* 选项卡按钮样式 */
.tab-item {
  padding: 10px 16px;
  font-size: 14px;
  color: #8f9ca3;
  cursor: pointer;
  background-color: red; /* 默认背景 */
  position: relative;
  transition: all 0.3s ease;
  margin-right: 2px; /* 防止选项卡紧贴 */
}


/* 激活状态 */
.tab-item.active {
  background-color: #fff; /* 激活背景颜色 */
  color: #2d3e44; /* 激活文字颜色 */
  font-weight: bold;
  z-index: 2;
  border: 1px solid #2d3e44; /* 边框色 */
  border-bottom: none; /* 隐藏底边 */
  border-radius: 10px 10px 0 0; /* 上方圆角 */
  
}


/* 内容区域 */
.tab-content {
  background-color: #fff; /* 内容背景 */
  border-radius: 0 0 10px 10px; /* 下方圆角 */
  padding: 20px;
  min-height: 120px;
}
</style>
